@import 'main.scss';
#container{
    width:100%;
    height:100%;
    @include flexBox;
    @include flex-direction(column);
    #shouyeHeader{
        width:100%;
        height:37px;
        border-bottom:1px solid #EEEEEE;
        position: relative;
        line-height:37px;
        text-align: center;
        @include flexBox;
        @include flex-direction(row);
        color:#ccc;
        .left{
            width:40px;
            height:100%;
        }
        .rt{
            width:40px;
            height:100%;
        }
        .box{
            flex: 1;
            width: 226px;
            height:26px;
            margin-top:6px;
            @include flexBox;
            @include flex-direction(row);
            line-height:26px;
            background:#eee;
            border-radius:5px;
            font-size:12px;
            font-weight: normal;
            .iconfont{
                margin-left:5px;
                margin-right:5px;
            }
        }
    }
    #shouyeContent{
        background:#F6F6F6;
        flex:1;
        overflow-x:hidden ;
        #banner{
            width: 100%;
            height:130px;
            .swiper-pagination{
                text-align: left;
            }
        }
        .banner-slide{
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            img{
                width:100%;
                height:100%;
            }
        }
        .berbm{
            width:100%;
            height:95px;
            padding-top: 10px;
            margin-bottom:10px;
            background:#fff;
            .berbox{
                width: 100%;
                height:85px;
                @include flexBox;
                .a{
                    text-align: center;
                    display:inline-block;
                    flex: 1;
                    &:nth-of-type(2){
                        border-left: 1px solid #ccc;
                        border-right: 1px solid #ccc;
                    }; 
                    .top{
                        color:#ff6801;
                        font-size:12px;
                    }
                    .ctn{
                        margin-top:3px;
                        font-size:13px;
                        width:85px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin: 0 auto;
                        color:#555;
                    }
                    img{
                        width:43px;
                        height:43px;
                        margin-top:10px;
                    }
                }
            }
        }
        //抢购
        .qg{
            background:white;
            list-style: none;
            left: 0;
            overflow: hidden;
            margin-bottom:10px;
            .top{
                width:96%;
                height:20px;
                padding:2%;
                font-size:13px;
                position:relative;
                .lt{
                    display: inline-block;
                    height:100%;
                    .wd{
                        display: inline-block;
                        height:100%;
                    }
                    span{
                        display: inline-block;
                        width:16px;
                        height:16px;
                        padding:1px;
                        background:black;
                        color:white;
                        text-align: center;
                        border-radius:3px;
                    }
                }
                .rt{
                    display: inline-block;
                    position: absolute;
                    right:10px;
                    font-size:12px;
                    a{
                        color:#B2B2B2;
                    }
                }
            }
            .btm{
                clear: both;
                overflow: hidden;
                width:100%;
                
                .btm-swiper{
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    background:white;
                    a{
                        display: inline-block;
                        width:100%;
                        height:130px;
                    }
                    p{
                        text-align:center;
                        height: 18px;
                        line-height: 18px;
                        &:nth-of-type(1){
                            font-size:13px;
                            color:#888;
                            width:76px;
                            margin: 0 auto;
                            overflow:hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        &:nth-of-type(2){
                            font-size:12px;
                            color:#f66;
                            span{
                                text-decoration: line-through;
                                color:#999;
                            }
                        }
                    }
                }
                img{
                        display: inline-block;
                        width:64px;
                        height:64px;
                        margin-top:5px;
                    }
            }   
        }
        
        //促销直达
        .zd{
            background:white;
            width:100%;
            margin-bottom:10px;
            font-size: 12px;
            p{
                &:nth-of-type(1){
                    color: black;
                }
                &:nth-of-type(2){
                    color:red;
                }
            }
            .tp{
                width:100%;
                height:34px;
                line-height:34px;
                text-align: left;
                font-size:12px;
                color:black;
                box-sizing:border-box;
                padding-left:12px;
                border-bottom:1px solid #ccc;
            }
            .ct{
                width: 100%;
                height:136px;
                display: flex;
                border-bottom:1px solid #ccc;
                div{
                    display: flex;
                    flex: 1;
                }
                .zlt{
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items:center;
                    p{
                        text-align: center;
                    }
                    img{
                        width:85px;
                        height:85px;
                    }
                }
                .zrt{
                    display:flex;
                    flex-direction: column;
                    border-left:1px solid #ccc;
                    a{
                        line-height:20px;
                        flex: 1;
                        position:relative; 
                        &:nth-of-type(1){
                            border-bottom: 1px solid #ccc;
                        }
                        img{
                            height:67px;
                            width:68px;
                            position: absolute;
                            right:0;
                            top: 0;
                        }
                        p{
                            width: 90%;
                            margin-left:20px;
                            font-size:12px;
                        }
                    }
                }
            }
            .bm{
                width: 100%;
                height:110px;
                display:flex;
                div{
                    flex: 1;
                    a{
                        width: 100%;
                        height: 100%;
                        display:block;
                        display: flex;
                        flex-direction: column;
                        justify-content:flex-end;
                        align-items:center;
                        img{
                            width: 68px;
                            height:67px;
                        }
                    }
                }
            }
        }
        
        
        //hot-market
        .hot-market{
            width:100%;
            background:white;
            margin-bottom:10px;
            .hmtp{
                width:100%;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size:13px;
                padding-top:10px;
                span{
                    color:#ccc;
                }
            }
            .hmbm{
                width:100%;
                height:327px;
                display: flex;
                flex-flow:wrap;
                div{
                    text-align: center;
                    width:80px;
                    height:71px;
                    a{
                        display: block;
                        width: 80px;
                        line-height: 71px;
                        img{
                            display:block;
                            width: 51px;
                            height: 51px;
                            margin: 0 auto;
                        }
                        span{
                            display: block;
                            width:68px;
                            height:20px;
                            line-height: 20px;
                            text-align: center;
                            font-size:13px;
                            margin: 0 auto;
                            font-size: 12px;
                            color:black;
                        }
                    }
                }
                
            }
        }
        
        //猜你喜欢
        .cx{
            width: 100%;
            .cxh{
                width: 100%;
                height:16px;
                padding:13px 0 10px;
                background:#F6F6F6;
                font-size:13px;
                text-align: center;
            }
            .cxctn{
                width:100%;
                display: flex;
                flex-flow:wrap;
                background: white;
                .cxbox{
                    background: white;
                    height:265px;
                    width:47%;
                    margin-left:2%;
                    margin-top:5px;
                    a{
                        width: 100%;
                        height: 100%;
                        display: block;
                        text-align:center;
                        position:relative;
                        .imgb{
                            width: 150px;
                            height: 200px;
                        }
                        .imgs{
                            position: absolute;
                            left:3px;
                            top: 0;
                            width:28px;
                            height:28px;
                        }
                        .ds{
                            width:138px;
                            height: 36px;
                            margin: 0 auto;
                            font-size:12px;
                            display: flex;
                            flex-wrap: wrap;
                            color:#888;
                            overflow:hidden;
                            span{
                                height: 16px;
                                background:#EFF3F6;
                                margin-left:5px;
                                margin-top:2px;
                            }
                        }
                        .dp{
                            width: 138px;
                            height:20px;
                            margin: 0 auto;
                            clear: both;
                            .sl{
                                float: left;
                                height: 20px;
                                font-size:14px;
                                color:black;
                                font-weight: bold;
                            }
                            .sr{
                                float:right;
                                height: 20px;
                                font-size: 12px;
                                color:#ccc;
                            }
                        }
                    }
                }
            }
        }
    }
}
